<template>
    <div id="login">
        <div id="login_content">
            <div class="login_title">远程医疗业务协同系统</div>
            <div>
                <a-form-model :model="loginForm" class="login-form" @click="login" :rules="rules" ref="loginRuleForm">
                    <a-form-model-item prop="username">
                        <a-input v-model="loginForm.username" placeholder="请输入您的账号"/>
                    </a-form-model-item>
                    <a-form-model-item prop="password">
                        <a-input-password v-model="loginForm.password" placeholder="请输入您的密码"
                                          @keyup.enter.native="login"/>
                    </a-form-model-item>
                    <a-button type="primary" block :loading="loading" @keydown="login" @click="login">登录</a-button>
                    <a-form-model-item prop="rememberMe">
                        <a-checkbox v-bind:style="{textAlign:'left'}" v-model="loginForm.rememberMe">记住我</a-checkbox>
                    </a-form-model-item>
                    <a-form-model-item>
                        <a href="" style="font-size: 14px;color: white;text-align: left">在线注册</a>
                        <a href="" style="font-size: 14px;color: white;text-align: right">忘记密码</a>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </div>
    </div>
</template>

<script>

import service from "@/utils/axios";
import baseUrl from "@/lib/global";
import {setToken} from "@/utils/sessionStorage";

export default {
    name: "Login",
    data() {
        return {
            wrapperCol: {span: 14},
            loading: false,
            loginForm: {
                userName: "",
                password: "",
                rememberMe: false
            },
            rules: {
                username: {required: true, message: '请输入账号', trigger: 'blur'},
                password: {required: true, message: '请输入密码', trigger: 'blur'}
            }
        }
    },
    methods: {
        login() {
            this.$refs.loginRuleForm.validate(valid => {
                this.loading = true;
                let url = baseUrl.developmentUrl.host1 + "login";
                if (valid) {
                    let data = {
                        username: this.loginForm.username,
                        password: this.loginForm.password,
                        rememberMe: this.loginForm.rememberMe
                    };
                    console.log(url);
                    service.post(url,data).then(response => {
                        console.log(response);
                        if(response && response.data){
                            console.log(response.data.data);
                            setToken( response.data.data);
                            this.$router.push({path: "/index"})
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
                this.loading = false;
            });

        },
    }
}
</script>

<style scoped>
#login {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0 auto;
}

#login_content {
    position: absolute;
    width: 420px;
    height: 300px;
    top: 30%;
    left: 38%;
}

.login_title {
    width: 100%;
    height: 30%;
    box-sizing: border-box;
    text-align: center;
    font: 30px "宋体";
    color: #fff;
    font-weight: bold;
}
</style>
